<template>
  <el-row>
    <el-col :span="2"> &nbsp; 名称：</el-col>
    <el-col :span="4">
      <el-input v-model="findValue.name" placeholder="名称"></el-input>
    </el-col>
    <el-col :span="2"> &nbsp; 地址：</el-col>
    <el-col :span="4">
      <el-input v-model="findValue.address" placeholder="地址"></el-input>
    </el-col>
    <el-col :span="2"> &nbsp; 电话：</el-col>
    <el-col :span="4">
      <el-input v-model="findValue.telephone" placeholder="电话"></el-input>
    </el-col>
  </el-row>

</template>

<script setup lang="ts">
  import { reactive, watch } from 'vue'
    
  import { getListState } from './_state-data-list'
  // 获取父组件的状态
  const { query }  = getListState()  

  // 记录查询条件
  const findValue = reactive({
    name: '',
    address: '',
    telephone: ''
  })

  watch(findValue, () => {
    query.findArray.length = 0
    for (const key in findValue) {
      const value = findValue[key]
      if (value) {
        query.findArray.push({key, value})
      }
    }
  })

  // console.log('state\n', pagerInfo)

</script>